<template>
  <div class="systemSetting-container">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane class="first" label="账号详情" name="first">
        <account></account>
      </el-tab-pane>
      <el-tab-pane
        label="公司信息"
        v-if="userStore.UserInfo.identity === '超级管理员'"
        name="second"
      >
        <companyInfo></companyInfo>
      </el-tab-pane>
      <el-tab-pane
        label="首页管理"
        v-if="userStore.UserInfo.identity === '超级管理员'"
        name="third"
      >
        <homeSet></homeSet>
      </el-tab-pane>
      <el-tab-pane
        label="其他设置"
        v-if="userStore.UserInfo.identity === '超级管理员'"
        name="fourth"
      >
        <other></other>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import account from './components/account.vue'
import companyInfo from './components/companyInfo.vue'
import homeSet from './components/homeSet.vue'
import other from './components/other.vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const activeName = ref<'first' | 'second' | 'third' | 'fourth'>('first')
</script>

<style scoped lang="scss">
.systemSetting-container {
  padding: 0 8px;
  .first {
    padding: 0 45px;
  }
}
</style>
